{% extends "base.html" %}

{% block title %}The Booth{% endblock %}
{% block body %}

  <div class="main">
    <h1>The Booth</h1>
    <table width ="100%">
    <td>
    <form action="/booth/" method="post" enctype="multipart/form-data" >
      <div style="display: none">
        <input type="hidden" name="_csrf_token" value="{{ csrf_token }}">
      </div>
      <p>
      	<button type="button" onclick="window.location.href='/webcam'">Take a Pic</button>
      </p>
      	<p>------------- or -------------</p>
      <p>
        {{ form.as_p }}
        <button type="button" onClick="uploadImage()">Upload Pic</button>
      </p>
      <div class="buttons">
        <input class="awesome green" type="submit" value="Add to album">
      </div>
    </form>
    </td>
    <td align="center">
    <img src="/booth.png">
    </td>
    </table> 
  </div>

<script type="text/javascript">
    //<![CDATA[
    
fileRef = new FileReference();
fileRef.addEventListener(Event.SELECT, handleFileSelect, false, 0, true);

public function handleFileSelect(event:Event):void {
				fileRef.load();
			}

public function uploadImage():void {
  
  FB.api('/me/photo', 'post',{message:'test', fileName:'myimage.jpg', image:img, no_story:'1'}, function(response) {
  if (!response || response.error) {
    alert('Error occured');
  } else {
    alert('Post ID: ' + response.id);
  }
});
}
  
    //]]>
</script>  
    
{% endblock %}
